<template>
  <view
    class="sound_message_container bg_container"
    @click="handleVoicePlay()"
    :class="{ 'message_item_self': isSender }"
  >
    <!-- 语音图标 -->
    <div class="bg voicePlay" :class="getIsPlay"></div>

    <div class="time">
      <!-- 时长 --> 
      <text decode='true'>{{ message.soundElem.duration }}</text>
      <!-- 语音条主体 -->
      <text>"</text>
    </div>
  </view>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "",
  props: {
    message: Object,
    isSender: Boolean,
  },
  data() {
    return {
    };
  },
  computed: {
    ...mapGetters([
      "storeAudioList",
    ]),
    getIsPlay() {
      const clientMsgID = this.message.clientMsgID
      const item = this.storeAudioList[clientMsgID]
      return { start: item?.isPlay || false };
    },
  },
  mounted() {
    if (plus.os.name == "iOS" && this.message.soundElem?.sourceUrl) {
      uni.downloadFile({
        url: this.message.soundElem.sourceUrl, //仅为示例，并非真实的资源
        success: (res) => {
          if (res.statusCode === 200) {
            this.setAudio(res.tempFilePath)
          }
        }
      });
    } else {
      this.setAudio(this.getUrl())
    }
  },
  methods: {
    setAudio(url) {
      const clientMsgID = this.message.clientMsgID
      if (!this.storeAudioList[clientMsgID]) {
        let innerAudioContext = uni.createInnerAudioContext();
        innerAudioContext.src = url;
        innerAudioContext.autoplay = false
        innerAudioContext.onEnded(() => {
          this.$store.dispatch(
            "conversation/updateAudioList",
            {
              [clientMsgID]: {
                ...this.storeAudioList[clientMsgID],
                isPlay: false
              },
            },
          )
        })
        this.$store.dispatch(
          "conversation/updateAudioList",
          {
            [clientMsgID]: {
              innerAudioContext,
              isPlay: false
            }
          },
        )
      }
    },
    getUrl() {
      return this.message.soundElem?.sourceUrl ?? this.message.soundElem?.soundPath;
    },
    // 播放语音
    handleVoicePlay() {
      const clientMsgID = this.message.clientMsgID

      const other = { ...this.storeAudioList }
      delete other[clientMsgID];
      for (var key in other) {
        const i = other[key]
        i.innerAudioContext.stop()
        i.isPlay = false
      }
      
      const item = this.storeAudioList[clientMsgID]
      if(item) {
        item.isPlay = !item.isPlay;
        item.isPlay ? item.innerAudioContext.play() : item.innerAudioContext.stop();
        this.$store.dispatch(
          "conversation/updateAudioList",
          {
            [clientMsgID]: item,
          },
        )
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.sound_message_container {
  display: flex;
  align-items: center;
  justify-content: center;

  .time {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.bg {
  background:url(@/static/images/sound.png) right 0 no-repeat;
  width: 20px;
  height: 20px;
  background-size: 400%;
}

.message_item_self {
  .voicePlay {
    transform: rotate(180deg);
  }
}

.voicePlay {
  animation-name: voicePlay;
  margin: 0 5px;

  &.start {
    animation-duration: 1s;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-timing-function: steps(3);
  }
}

@keyframes voicePlay {
  0% {
    background-position: 0;
  }
  100% {
    background-position: 100%;
  }
}
</style>
